import React, { useState, useRef, useEffect } from 'react';
import './xq.css';
import { NavBar, Space, Swiper, Rate, Toast } from 'antd-mobile';
import { ShareO, CartO, ChatO } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { EnvironmentOutline, RightOutline } from 'antd-mobile-icons';
import axios from 'axios';
import { ActionBar } from 'react-vant'

const Xq1 = () => {

    // 跳转
    const navigate = useNavigate();
    // 导航栏右侧
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' }}>
                <ShareO />
            </Space>
        </div>
    );
    // 轮播图
    const imgs = ['cheng.png', 'cheng.png'];
    // 评价
    const pingjia = [
        {
            name: '娃哈哈',
            img: 'https://img.keaitupian.cn/newupload/08/1629961913619227.jpg',
            contnent: '美观漂亮，质量好，价格实惠，值得购买'
        },
        {
            name: '果冻',
            img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.yp-D-KHI3e2nN4eMBJcEVAAAAA?rs=1&pid=ImgDetMain',
            contnent: '非常不错，非常方便'
        },
        {
            name: '小米',
            img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.I54uiY2l-ZVLyclyb-uxuAHaHa?pid=ImgDet&w=474&h=474&rs=1',
            contnent: '真的太赞了，性价比超高'
        },
        {
            name: '。',
            img: 'https://img.keaitupian.cn/newupload/11/1669201572953063.jpg',
            contnent: '客服解答耐心，物流速度快，质量好，价格实惠，值得购买'
        }
    ];
    const [showAllReviews, setShowAllReviews] = useState(false);
    const handleShowMore = () => {
        setShowAllReviews(true);
        document.body.style.overflow = 'hidden'; // 禁止页面滚动
    };

    const reviewsRef = useRef(null);

    const handleScroll = () => {
        const { scrollTop, scrollHeight, clientHeight } = reviewsRef.current;
        if (scrollTop + clientHeight >= scrollHeight) {
            document.body.style.overflow = 'auto'; // 恢复页面滚动
        }
    };

    const reviewsToShow = showAllReviews ? pingjia : pingjia.slice(0, 2);

    //跳转客服
    const kefu = (img)=>{
        navigate('/chat')
        localStorage.setItem('img',JSON.stringify(img))
    }

    return (
        <div className='xq-div'>
            <NavBar right={right} onBack={() => navigate(-1)} className='xq-nav'>
                商品详情
            </NavBar>
            <Swiper loop autoplay onIndexChange={(i) => {
                console.log(i, 'onIndexChange1');
            }}>
                {(
                    imgs.map((item, index) => (
                        <Swiper.Item key={index}>
                            <img src={item} alt="" className='xq-img' />
                        </Swiper.Item>
                    ))
                )}
            </Swiper>
            <div className='xq-div1'>
                <div className='xq-div2'>
                    <h1 className='xq-h1'>￥149</h1>
                    <p className='xq-p'>
                        <span className='xq-span'>限时折扣</span>
                        <br />
                        <span className='xq-span1'>
                            <del>￥199</del>
                        </span>
                    </p>
                </div>
                <p className='xq-p1'>库存：999</p>
            </div>
            <div className='xq-div3'>
                <h2 className='xq-h2'>
                    小米体脂秤2代
                    <span className='xq-span2'>自营</span>
                </h2>
                <p className='xq-p2'>
                    <span>小米体脂秤2代</span>
                    <span className='xq-span3'>降价通知</span>
                </p>
            </div>
            <div className='xq-div4'>
                <p className='xq-p3'>运费</p>
                <p>￥0.00~26.00</p>
            </div>
            <div className='xq-div5'>
                <div className='xq-div6'>
                    <p style={{ color: '#999999' }}>送至</p>
                    <EnvironmentOutline className='xq-icon' />
                    <p>北京市朝阳区望京大厦</p>
                </div>
                <RightOutline className='xq-icon1' />
            </div>
            <div className='xq-div7'>
                <div className='xq-div5' style={{ marginBottom: '-1rem' }}>
                    <p className='xq-p3'>评价</p>
                    <div className='xq-div6'>
                        <p>好评度<span className='xq-span4'>98%</span></p>
                        <RightOutline className='xq-icon1' />
                    </div>
                </div>
                <div
                    ref={reviewsRef}
                    style={{
                        maxHeight: showAllReviews ? '15rem' : 'auto',
                        overflowY: showAllReviews ? 'auto' : 'hidden',
                        padding: '10px'
                    }}
                    onScroll={handleScroll}
                >
                    {reviewsToShow.map((item, index) => (
                        <div key={index} className='xq-div9'>
                            <div className='xq-div8'>
                                <div style={{ display: 'flex' }}>
                                    <img src={item.img} alt="" className='xq-img1' />
                                    <p className='xq-p4'>{item.name}</p>
                                </div>
                                <Rate readOnly value={5} className='xq-rate' />
                            </div>
                            <p className='xq-p5'>{item.contnent}</p>
                        </div>
                    ))}
                </div>
                {!showAllReviews && (
                    <p className='xq-p6' onClick={handleShowMore}>
                        查看更多评价
                    </p>
                )}
            </div>
            <div className='xq-div10'>
                <h2 className='xq-h21'>为你推荐</h2>
                <div className='xq-div11'>
                    {Array.from({ length: 6 }).map((_, index) => (
                        <div key={index}>
                            <img src='cheng.png' alt="" className='xq-img2' />
                            <p>小米体脂秤2代</p>
                            <p>￥149</p>
                        </div>
                    ))}
                </div>
            </div>
            <div className='xq-div12'>
                <h2 style={{ fontSize: "0.5rem", marginLeft: "0.5rem" }}>商品详情</h2>
            </div>
            <div>
                {Array.from({ length: 3 }).map((_, index) => (
                    <img src="cheng.png" alt="" className='xq-img3' key={index} />
                ))}
            </div>
            <div>
                <ActionBar>
                    <ActionBar.Icon icon={<ChatO />} text='客服' onClick={() => kefu('cheng.png')} />
                    <ActionBar.Icon icon={<CartO />} text='购物车' />
                    <ActionBar.Button color='#fcbdc0' type='warning' text='加入购物车' />
                    <ActionBar.Button color='red' type='danger' text='立即购买' onClick={() => navigate('/ddqr')} />
                </ActionBar>
            </div>
        </div>
    );
};

export default Xq1;